<template>
  <div>
    <el-card shadow="never" class="box-card" >
       <div class="clearfix header_loat" >
        <a-tabs type="card" defaultActiveKey='1' @change="callback">
          <a-tab-pane key="1">
            <span slot="tab" style="font-size: 18px;font-weight: 600">待办任务({{count}})</span>
            <a class="a_btn" @click="showNew()">新增项目</a>
            <div class="tab_cho">
              <TaskForm @getCount="getCount"></TaskForm>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" forceRender>
            <span slot="tab" style="font-size: 18px;font-weight: 600">待阅任务({{readCount}})</span>
            <div class="tab_cho">
              <ReadingForm @getReadCount="getReadCount"></ReadingForm>
            </div>
          </a-tab-pane>
          <a class="a" slot="tabBarExtraContent" @click="showDetail()" style="color: #40a9ff!important;font-size:13px!important;border:0;">查看全部 &gt;</a>
        </a-tabs>
      </div>
    </el-card>
    <IconForm></IconForm>
    <FileForm></FileForm>
  </div>
</template>
<script>
  import { ACCESS_TOKEN,ACCESS_TOKEN_IP } from "@/store/mutation-types"
  import Vue from 'vue'
  import {openIFrame } from '@/utils/util'
  import IconForm from '@/views/dashboard/IconForm'
  import FileForm from '@/views/dashboard/FileForm'
  import TaskForm from '@/views/dashboard/TaskForm'
  import ReadingForm from '@/views/dashboard/ReadingForm'
  export default {
    components: {IconForm,FileForm,ReadingForm,TaskForm,},
    data() {
      return {
        count: 0,
        tabNum:1,
        readCount:0,
      }
    },
    methods: {
      getCount(count){
        this.count = count;
      },
      getReadCount(count){
        this.readCount = count;
      },
      callback(key){
        this.tabNum = key;
      },
      showNew(){
        let ticket = Vue.ls.get(ACCESS_TOKEN);
        let ReturnUrl = encodeURIComponent('/Modules/FlowDialog/SelectFlowDialog/index.html?MustLoadPage=1560481936641&createtype=15');
        let baseUrl = process.env.VUE_APP_ADD_HTTP;
        let UserIP = "&UserIP="+ Vue.ls.get(ACCESS_TOKEN_IP);
        let url = baseUrl + "/login.xip?LoginMethod=ssologin&Ticket=" + ticket + UserIP + "&ReturnUrl=" + ReturnUrl + "";
        openIFrame("Modules-Add", '/Modules/Add', "新增项目", url)
        this.$router.push({ name: "Modules-Add" })
      },
      showDetail() {
        let ticket = Vue.ls.get(ACCESS_TOKEN)
        let baseUrl = process.env.VUE_APP_ADD_HTTP;
        let UserIP = "&UserIP="+ Vue.ls.get(ACCESS_TOKEN_IP);
        let url = baseUrl + "/login.xip?LoginMethod=ssologin&Ticket=" + ticket + UserIP + "&ReturnUrl=";
        if (this.tabNum == 1) {
          let ReturnUrl = encodeURIComponent('/Modules/Task/TaskOfList.htm?request=EgovPlatform_TaskToDoList&request_type=12#')
          url += ReturnUrl;
          openIFrame("Modules-Task-TaskOfList", '/Modules/Task/TaskOfList', '个人任务列表-待办任务', url)
          this.$router.push({ name: "Modules-Task-TaskOfList" })
        } else if (this.tabNum == 2) {
          let ReturnUrl = encodeURIComponent('/Modules/GeneralList/GeneralList.htm?request=EgovPlatform_TaskOfCirculated_List&request_type=13#')
          url += ReturnUrl;
          openIFrame("Modules-GeneralList-GeneralList", '/Modules/GeneralList/GeneralList', '待阅任务', url)
          this.$router.push({ name: "Modules-GeneralList-GeneralList" })
        }
      }
    }
  }
</script>
<style scoped>
  td {
    height: 30px !important;
  }
 .header_loat{
    padding:1px 5px 5px;
    position: relative;
  }
  .tab_cho{
    /*height: 260px;*/
    height: 480px;
    overflow: hidden;
  }
  .a_btn{
    background: #83A7CF;
    display: block;
    position: absolute;
    color:#fff;
    padding: 3px 20px;
    font-size: 12px;
    border-radius: 25px;
    top:12px;
    right:100px;
  }
  .ant-table td {
    height: 48px !important;
  }



  .active {
    color: #ff8000 !important;
  }

  .ant-table .ant-table-title {
    border: none !important;
    display: block !important;
    padding: 10px 0 10px 6px;
  }

  .center {
    display: flex;
    align-items: center;
    font-size: 12px;
  }

  .ant-table .ant-table-small>.ant-table-content>.ant-table-body {
    margin: 0 !important;
  }

  .ant-table .ant-table-title {
    padding: 10px 0 0px 6px !important;
  }
</style>
<style>
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container{
    height:45px!important;
  }
  .ant-tabs-nav div:first-child{
    height:44px;
  }
  .ant-table .ant-table-title {
    border: none !important;
    display: block !important;
    padding: 10px 0 10px 6px;
  }

  .top-title {
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  @media (min-width: 640px) {
    .auto-width {
      width: 80px;
    }
  }

  @media (min-width: 960px) {
    .auto-width {
      width: 120px;
    }
  }

  @media (min-width: 1200px) {
    .auto-width {
      width: 150px;
    }
  }

  @media (min-width: 1450px) {
    .auto-width {
      width: 200px;
    }
  }

  @media (min-width: 1600px) {
    .auto-width {
      width: 250px;
    }
  }

  .nav-bar {}

  .nav-bar li {
    box-sizing: border-box;
    text-align: center;
    position: relative;
    padding-bottom: 20px;
  }

  .nav-bar li a img {
    width: 29%;
    margin-bottom: -28px;
  }

  .nav-bar li a p {}


.more-task {
  width: 100%;
  padding: 0;
  margin: -1px;
}

.more-task li {
  width: 50%;
}

.addTask {
  display: inline-block;
  color: #fff;
  width: 88px;
  height: 24px;
  background: rgba(131, 167, 207, 1);
  box-shadow: 0px 2px 10px rgba(131, 167, 207, 0.24);
  opacity: 1;
  border-radius: 174px;
  text-align: center;
  margin-right: 10px;
}

</style>